* {
   box-sizing: border-box;
}

.flexboxtweener, .flexboxtweener>body {
  height: 100%;
}

body {
   min-height: 100vh;
   width: 100%;
   margin: 0;
   color: #000000;
   font-size: 1em;
   font-family: Calibri;
   display: -webkit-box;
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;
   /* TWEENER - IE 10 */
   display: -webkit-flex;
   /* NEW - Chrome */
   display: flex;
   -ms-flex-direction: column;
   flex-direction: column;
   -ms-flex-align: stretch;
   align-items: stretch;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0d47a1+0,1e88e5+80 */
   background: #D6D6D6;
   /* Old browsers */
   background: -moz-linear-gradient(top, #D6D6D6 0%, #FFFFFF 80%);
   /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #D6D6D6 0%, #FFFFFF 80%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #D6D6D6 0%, #FFFFFF 80%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#D6D6D6', endColorstr='#FFFFFF', GradientType=0);
   /* IE6-9 */
   background-repeat: no-repeat;
   background-attachment: fixed;
}
 
.headWrap {
   min-height: 100%;
   display: -webkit-box;
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;
   /* TWEENER - IE 10 */
   display: -webkit-flex;
   /* NEW - Chrome */
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: center;
   align-content: center;
}

header {
   background: #FFF;
   margin-bottom: 20px;
   /*min-width: 1398px;*/
   /*width: 100%;
   -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 1);
   -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 1);
   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 1);*/
   -ms-flex: none;
   flex: none;
}

header .logoContainer {
   -webkit-box-flex: 1;
   /* OLD - iOS 6-, Safari 3.1-6 */
   -moz-box-flex: 1;
   /* OLD - Firefox 19- */
   width: 20%;
   -webkit-flex: 1;
   /* Chrome */
   -ms-flex: 1;
   /* IE 10 */
   flex: 0 1 20%;
   -webkit-box-ordinal-group: 1;
   /* OLD - iOS 6-, Safari 3.1-6 */
   -moz-box-ordinal-group: 1;
   /* OLD - Firefox 19- */
   -ms-flex-order: 1;
   /* TWEENER - IE 10 */
   -webkit-order: 1;
   order: 1;
}

.headWrap > nav {
   -webkit-box-flex: 4;
   /* OLD - iOS 6-, Safari 3.1-6 */
   -moz-box-flex: 4;
   /* OLD - Firefox 19- */
   width: 80%;
   -webkit-flex: 4;
   /* Chrome */
   -ms-flex: 4;
   /* IE 10 */
   flex: 0 4 80%;
   -webkit-box-ordinal-group: 2;
   /* OLD - iOS 6-, Safari 3.1-6 */
   -moz-box-ordinal-group: 2;
   /* OLD - Firefox 19- */
   -ms-flex-order: 2;
   /* TWEENER - IE 10 */
   -webkit-order: 2;
   order: 2;
   line-height: normal;
}

header nav ul {
   margin: 0;
   padding: 0;
   /*height: 100%;*/
   list-style-type: none;
   display: block;
   position: relative;
}

header nav ul:after {
   content: "";
   clear: both;
   display: block;
}

header nav ul li {
   /*text-align: center;*/
   color: #C40000;
   font-family: Calibri;
   font-size: 1.125em;
   font-style: normal;
   font-weight: bold;
   /*padding: 0.75em;
   border-right: 1px solid #C0C0C0;
   min-width: 100px;
   float: left;
   position: relative;*/
}

header nav ul li a {
   color: inherit;
   text-decoration: none;
   cursor: default;
}

header nav li:first-child {
   /*border-left: 1px solid #C0C0C0;*/
}

header nav li:hover,
header nav li:active,
header nav li.selected {
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a3c4ff+0,bfd5ff+35,e5eeff+100 */
   background: #BBBBBB;
   /* Old browsers */
   background: -moz-linear-gradient(top, #BBBBBB 0%, #E2E2E2 100%);
   /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #BBBBBB 0%, #E2E2E2 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #BBBBBB 0%, #E2E2E2 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#BBBBBB', endColorstr='#E2E2E2', GradientType=0);
   /* IE6-9 */
}

header nav li.navbar-brand:hover {background: none;}

.tab {
   color: #C40000;
   font-family: Calibri;
   font-size: 1.125em;
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
}

/*header nav ul li .subNav {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   width: auto;
   background: white;
   white-space: nowrap;
   margin: 0;
   padding: 0;
}

header nav ul li:hover > .subNav {
   display: block;
}

.subNav ul li {
   float: none;
   border: none;
   border-bottom: 1px solid #C0C0C0;
   font-size: 1em;
   padding: 0.25em;
}

.subNav ul li:first-child {
   border-left: none;
}*/

#MainContent {
   -webkit-box-flex: 1 0 auto;
   /* OLD - iOS 6-, Safari 3.1-6 */
   -moz-box-flex: 1 0 auto;
   /* OLD - Firefox 19- */
   -webkit-flex: 1 0 auto;
   /* Chrome */
   -ms-flex: 1 0 auto;
   /* IE 10 */
   flex: 1 0 auto;
}


.attention {
   color: yellow;
}

.warning, .text-danger {
   color: #FF0000;
   font-face: Calibri;
   font-size: 1em;
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
}

hr, .separator {
    background: #C40000;
    border-color: #C40000;
}

/* places a red asterisk after labels */
label.required:after {
   content: "*";
   color: #FF0000;
   font-face: Calibri;
   font-size: 1em;
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
   padding-left: 2px;
}

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}

.clearfix:after {
   clear: both;
}

button,
input[type=button],
input[type=submit],
input[type=reset],
.button-primary {
   color: #FFFFFF;
   font-family: Calibri;
   font-size: 1em;
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
   padding: 0.5em;
   border: none;
   line-height: 1em;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

.button-secondary {
   color: #FFFFFF;
   font-family: Calibri;
   font-size: 1em;
   font-weight: bold;
   text-decoration: none;
   font-style: normal;
   padding: 0.5em;
   border: none;
   line-height: 1em;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 1);
   -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 1);
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 1);
}

button,
input[type=button],
input[type=submit],
.button-primary {
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cb6c1d+0,ff8f2a+80,ff8f26+100 */
   background: #C40000;
   /* Old browsers */
   background: -moz-linear-gradient(top, #C40000 0%, #FF4534 100%);
   /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #C40000 0%, #FF4534 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #C40000 0%, #FF4534 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#C40000', endColorstr='#FF4534', GradientType=0);
   /* IE6-9 */
}

.button-secondary,
input[type=submit].button-secondary,
input[type=button].button-secondary,
button.button-secondary,
button[type=submit].button-secondary,
.tab {
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bcbcbc+0,d0d0d0+35,ededed+100 */
   background: #C40000;
   /* Old browsers */
   background: -moz-linear-gradient(top, #C40000 0%, #FF4534 100%);
   /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #C40000 0%, #FF4534 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #C40000 0%, #FF4534 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#C40000', endColorstr='#FF4534', GradientType=0);
   /* IE6-9 */
}

button:hover,
button:active,
input[type=button]:hover,
input[type=button]:active,
input[type=submit]:hover,
input[type=submit]:active,
.button-primary:hover,
.button-primary:active,
.button-secondary:hover,
.button-secondary:active {
   cursor: pointer;
}

button:disabled,
input[type=button]:disabled,
input[type=submit]:disabled,
.button-primary:disabled,
.button-secondary:disabled {
   background: #CCC;
   border-color: #fff;
   color: #787878;
   cursor: not-allowed;
}

button:hover, input[type=button]:hover, input[type=submit]:hover, .button-primary:hover,
button:focus, input[type=button]:focus, input[type=submit]:focus, .button-primary:focus,
.btn:hover, .btn:focus,
.button:hover, .button:focus {
    color: #fff;
    background: #000000;
    text-decoration: none;
}

button[type=submit]:before,
.button-undo:before,
.button-back:before,
.button-help:before {
   font-family: FontAwesome, Calibri, Geneva, Arial, Helvetica, sans-serif !important;
   font-weight: normal;
   font-size: 1.5em;
   vertical-align: middle;
   padding-right: 0.3em;   
}

button[type=submit]:before {
   content: "\f152";
}

.button-undo:before {
   content: "\f0e2";
}

.button-back:before {
   content: "\f060";
}

.button-help:before {
   content: "\f128";  
}

h1, .title {
   padding: 0.25em;
   color: #000000;
   font-family: Calibri;
   font-size: 1.5em;
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
   text-align: center;

   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a3c4ff+0,bfd5ff+35,e5eeff+100 */
   background: #BBBBBB;
   /* Old browsers */
   background: -moz-linear-gradient(top, #BBBBBB 0%, #BBBBBB 100%);
   /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #BBBBBB 0%, #BBBBBB 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #BBBBBB 0%, #BBBBBB 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#BBBBBB', endColorstr='#BBBBBB', GradientType=0);
   /* IE6-9 */
}

.tab-active {
   width: 400px;
   margin: 4px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a3c4ff+0,bfd5ff+35,e5eeff+100 */
   background: #BBBBBB;
   /* Old browsers */
   background: -moz-linear-gradient(top, #BBBBBB 0%, #E2E2E2 100%);
   /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #BBBBBB 0%, #E2E2E2 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #BBBBBB 0%, #E2E2E2 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#BBBBBB', endColorstr='#E2E2E2', GradientType=0);
   /* IE6-9 */
}

.webgrid-header {
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a3c4ff+0,bfd5ff+35,e5eeff+100 */
   background: #BBBBBB;
   /* Old browsers */
   background: -moz-linear-gradient(top, #BBBBBB 0%, #E2E2E2 100%);
   /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #BBBBBB 0%, #E2E2E2 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #BBBBBB 0%, #E2E2E2 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#BBBBBB', endColorstr='#E2E2E2', GradientType=0);
   /* IE6-9 */
}

input[type=radio] ~ label,
input[type=checkbox] ~ label {
   display: inline-block;
}

.input-container {
   background-color: #FFF;
   color: #000;
   display: inline-block;
   padding-left: 5px;
   padding-right: 5px;
   margin-left: 5px;
}

input[type=text],
input[type=number],
input[type=email],
select,
textarea {
   /*color: #000;*/
   padding: 1px;
}

/**** CONTENT BOXES ***************************************************************************/

.box-light {
   border: 1px solid #E5E5E5;

   background:  #C40000;
   /* Old browsers */
   background: -moz-linear-gradient(top, #C40000 0%, #C40000 100%);
   /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #C40000 0%, #C40000 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #C40000 0%, #C40000 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#C40000', endColorstr='#C40000', GradientType=0);
}

.box-medium {
   border: 1px solid #C7C7C7;
   
   background:  #E4E4E4;
   /* Old browsers */
   background: -moz-linear-gradient(top, #E4E4E4 0%, #E4E4E4 100%);
   /* FF3.6-15 */
   background: -webkit-linear-gradient(top, #E4E4E4 0%, #E4E4E4 100%);
   /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, #E4E4E4 0%, #E4E4E4 100%);
   /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#E4E4E4', endColorstr='#E4E4E4', GradientType=0);
}

/* ----------- Most phones ----------- */


/* Portrait and Landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) {
   header {
      min-width: 320px;
   }
   header .headWrap {
      display: block;
   }
   .headWrap > nav {
      width: 100%;
   }
   header .logoContainer {
      display: block;
      width: 50%;
      margin: auto;
   }
   header .logoContainer img {
      display: block;
      margin: 0 auto 0.2em auto;
   }
   header nav {
      display: block;
      width: 100%
   }
   header nav ul {
      display: block;
   }
   header nav li {
      display: block;
      border: none;
      border-bottom: 1px solid #C0C0C0;
      font-size: 1.1em;
      padding: 0.2em;
      width: 100%;
   }
   header nav li:first-child {
      border-top: 1px solid #C0C0C0;
   }
   header nav ul li .subNav {
      position: relative;
   }
   #MainContent {
      min-width: 320px;
      padding: 1em 0;
      flex: none;
   }
   footer {
      min-width: 320px;
   }
   .allied-footer {
      display: block;
   }
   label,
   input:not([type="checkbox"]):not([type="radio"]),
   textarea,
   select,
   button {
      display: block;
      width: 100%;
   }
}


/* ----------- Most tablets ----------- */

@media only screen and (min-device-width: 737px) and (max-device-width: 1024px) {
   header {
      min-width: 1024px;
   }
   header .headWrap {
      display: block;
      min-width: 1024px;
   }
   header nav li {
      font-size: 1.1em;
      padding: 0.2em;
   }
   #MainContent {
      min-width: 1024px;
   }
   footer {
      min-width: 1024px;
   }
   
}